  :host {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-bar {
    justify-content: space-between;
    padding: 0 24px;
    min-height: 60px;
    background-color: hsl(var(--ig-secondary-500));
    position: relative;
    min-width: 50px;
    align-items: center;
  }

  .row {
    display: flex;
  }

  .row-layout {
    align-items: center;
    position: relative;
    min-width: 50px;
  }

  .logo-image {
    width: 138px;
    height: 24px;
    object-fit: none;
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .separator {
    margin: 0 16px;
    color: hsl(var(--ig-gray-800), 0.26);
    height: max-content;
    min-width: min-content;
    flex: 0 0 auto;
  }

  .title {
    height: max-content;
    min-width: min-content;
    flex: 0 0 auto;
  }

  .button {
    margin: 0 8px 0 8px;
    min-width: min-content;
    height: max-content;
    flex: 0 0 auto;
  }

  .help-menu {
    margin: 0 0 0 16px;
    min-width: min-content;
    height: max-content;
    flex: 0 0 auto;
  }

  .menu-item-help {
      color: white;
      text-decoration: none;
  }

  igx-avatar {
    cursor: pointer;
  }

  .button-tranparent {
    --igx-button-foreground: hsl(var(--ig-gray-900));
	  --igx-button-background: transparent;
    --igx-button-hover-background: transparent;
    --igx-button-hover-foreground: var(--igx-button-foreground);
  }

  .button-solid {
    --igx-button-foreground: hsl(var(--ig-primary-700));
    --igx-button-background: hsla(var(--ig-gray-900), .9);
    --igx-button-hover-background: var(--igx-button-background);
    --igx-button-hover-foreground: var(--igx-button-foreground);
  }